<template>
  <el-form :inline="true">
    <el-form-item>
        <el-select v-model="city" placeholder="请选择城市" class="home-search-select">
          <el-option label="北京市" value="北京市"></el-option>
          <el-option label="上海市" value="上海市"></el-option>
          <el-option label="广州市" value="广州市"></el-option>
        </el-select>
        <el-select v-model="district" placeholder="请选择区域" class="home-search-select">
          <el-option label="海淀区" value="海淀区"></el-option>
          <el-option label="朝阳区" value="朝阳区"></el-option>
          <el-option label="长宁区" value="长宁区"></el-option>
          <el-option label="闵行区" value="闵行区"></el-option>
        </el-select>
      <el-input placeholder="请输入商品名或店铺名" v-model="keyword" class="home-search-input">

      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="home-search-button" @click="gotoSearch">搜 索</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ROUTENAME } from 'services/constConfig.js'
export default {
  data () {
    return {
      city: this.$route.query.city,
      district: this.$route.query.district,
      keyword: this.$route.query.keyword
    }
  },
  methods: {
    gotoSearch() {
      this.$router.push({path: ROUTENAME.STORE, query: {city: this.city, district: this.district, keyword: this.keyword}})
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 130px;
  height: 56px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.home-search-input {
  width: 600px;
  height: 56px;
}
.home-search-button {
  width: 128px;
  height: 56px;
  font-size: 16px;
  background-color: #f74342;
  color: #ffffff;
  border: none;
}
.home-search-input .el-input__inner {
  height: 56px;
  border-radius: 0;
  font-size: 16px;
  color: #606266;
}
.home-search-select .el-input__inner {
  /* width: 600px; */
  height: 56px;
}
</style>
